<template>
	<view class="content">
		<!-- f1 -->
		<view class="myHeader">
			<uni-list class="uniList">
				<uni-list-item
					:title="userProfiles.uname"
					:note="userProfiles.phone"
					link
					to="/pages/myInfo/myInfo"
					thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
					thumbSize="lg"
					showArrow
				>
					<template v-slot:footer>
						<image class="slot-image" style="width: 35rpx;" src="/static/logo.png" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list class="uni-list1"><uni-list-item title="我的互动" link thumb="/static/img/chat.png"></uni-list-item></uni-list>
			<uni-list class="uni-list2">
				<uni-list-item title="开门记录" link thumb="/static/img/door.png"></uni-list-item>
				<uni-list-item title="缴费记录" link thumb="/static/img/pay.png"></uni-list-item>
				<uni-list-item title="收获地址" link thumb="/static/img/loc.png"></uni-list-item>
			</uni-list>
			<uni-list class="uni-list3"><uni-list-item title="设置" link to="/pages/setup/setup" thumb="/static/img/gear.png"></uni-list-item></uni-list>
		</view>
	</view>
</template>

<script>
import { userProfile, base } from '../../service/index.js';
export default {
	data() {
		return {
			base,
			userProfiles: {},
			avatars: ''
		};
	},
	async onLoad() {
		let data = await userProfile();
		this.userProfiles = data;
	},
	methods: {}
};
</script>

<style lang="scss">
.myHeader {
	display: block;
	.uniList {
		display: flex;
	}
	.uni-list1 {
		margin-top: $uni-spacing-col-lg;
	}
	.uni-list2 {
		margin-top: $uni-spacing-col-lg;
	}
	.uni-list3 {
		margin-top: $uni-spacing-col-lg * 2;
	}
}
.myHeader-body {
	display: flex;
	flex-direction: column;
}
::v-deep .uni-list-item__container {
	align-items: center;
}
</style>
